<template>
	<view>
		<view class="content-box" v-if="dataList.length > 0">
			<view class="margin padding bg-white radius-lg item-box" v-for="(item, index) in dataList" :key="item.id">
				<view class="top-status" :class="['color'+item.status]">
					{{ selectDictLabel(auditStatus, item.status) }}
				</view>
				<view class="text-black text-bold text-lg uv-line-1 margin-bottom">
					{{selectDictLabel(orderExcType, item.type)}}
				</view>
				<view class="flex text-gray margin-bottom-sm">
					<view class="">
						申请原因：
					</view>
					<view class="">
						{{item.delayReason}}
					</view>
				</view>
				<!-- <view class="flex text-gray margin-bottom-sm">
					<view class="">
						提交人：
					</view>
					<view class="">
						{{item.createName}}
					</view>
				</view> -->
				<view class="flex text-gray">
					<view class="">
						申请时间：
					</view>
					<view class="">
						{{item.createTime}}
					</view>
				</view>
				<view class="flex align-center justify-end">
					<button class="cu-btn round bg-sub margin-right sm" @click="onReportCheck(item, false)">查看</button>
					<!-- 暂存和待审核可以修改 -->
					<button class="cu-btn round bg-main margin-right sm" v-if="item.status == '4'||item.status == '2'||item.status == '1'"
						@click="handelEdit(item)">编辑</button>
					<!-- <button class="cu-btn round bg-red margin-right sm"
						v-if="item.status !== '0' && item.status !== '1'" @click="onDelete(item)">删除</button> -->
					<button class="cu-btn round  bg-red sm" v-if="item.status === '2'"
						@click="onCancel(item)">取消</button>
				</view>
			</view>
		</view>
		<uv-empty v-else mode="list"></uv-empty>
		<view class="foot-box">
			<button class="cu-btn flex-sub" v-if="hadApply" @click="goBack">返回</button>
			<button class="cu-btn flex-sub" :class="theme == 'fs'? 'bg-main': 'bg-green'" v-else
				@click="onReport({})">上报异常</button>
		</view>
	</view>
</template>

<script>
	import {
		selectDictLabel
	} from '@/utils/huida.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		// dicts: ['order_exc_type '],
		computed: {
			...mapGetters(['theme'])
		},
		data() {
			return {
				id: '',
				orderLogId: '',
				homeworkStartTime: '',
				dockingPeopleTime: '',
				dataList: [],
				orderExcType: [],
				auditStatus: [],
				hadApply: false
			};
		},
		onLoad(data) {
			if (this.theme == 'farmer') {
				uni.setNavigationBarColor({
					backgroundColor: '#0BCA89',
					frontColor: '#ffffff'
				});
			} else {
				uni.setNavigationBarColor({
					backgroundColor: '#006BFE',
					frontColor: '#ffffff',
				});
			}
			this.id = data.id
			this.orderLogId = data.orderLogId
			this.homeworkStartTime = data.homeworkStartTime
			this.dockingPeopleTime = data.dockingPeopleTime
			uni.$uv.http.get('/system/dict/data/type/order_exc_type').then(res => {
				this.orderExcType = res.data.map(item => ({
					label: item.dictLabel,
					value: item.dictValue
				}))
			})
			uni.$uv.http.get('/system/dict/data/type/audit_status').then(res => {
				this.auditStatus = res.data.map(item => ({
					label: item.dictLabel,
					value: item.dictValue
				}))
			})
		},
		onShow() {
			this.loadList()
		},
		methods: {
			selectDictLabel,
			goBack() {
				uni.navigateBack()
			},
			onReport() {
				uni.$uv.route({
					url: '/subPages/pages/reportException/index',
					params: {
						id: this.id,
						orderLogId: this.orderLogId,
						homeworkStartTime: this.homeworkStartTime,
						dockingPeopleTime: this.dockingPeopleTime,
						isEdit: true
					}
				})
			},
			handelEdit(item) {
				// 列表中除了本条是否还有其他在审核中或者暂存的
				const arr = this.dataList.filter(e => e.id!=item.id)
				const sm = arr.some(item => item.status == '2' || item.status == '4')
				if(sm) {
					uni.showToast({
						icon: 'none',
						title: '已存在申请记录，不能编辑此记录！'
					})
					return
				}
				this.onReportCheck(item, true)
			},
			onReportCheck(item, flag) {
				uni.$uv.route({
					url: '/subPages/pages/reportException/index',
					params: {
						id: this.id,
						orderLogId: this.orderLogId,
						homeworkStartTime: this.homeworkStartTime,
						dockingPeopleTime: this.dockingPeopleTime,
						expId: item.id,
						isEdit: flag
					}
				})
			},
			loadList() {
				const theme = this.theme === 'farmer' ? 1 : 2;
				this.$http.get(`/cadre/orderException/getDatailByOrderId/${this.id}/${theme}`).then(res => {
					// 是否存在正则审核的
					this.hadApply = res.data.some(item => item.status == '2' || item.status == '4')
					setTimeout(() => {
						this.dataList = res.data
					}, 300)
				})
			},
			// 取消
			onCancel(item) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定取消该记录？',
					success: function(res) {
						if (res.confirm) {
							that.$http.get(`/cadre/orderException/cancel/${item.id}`).then(res => {
								if (res.code === 200) {
									uni.showToast({
										title: '取消成功'
									})
									that.loadList()
								} else if (res.code === 500) {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									});
								} else {
									uni.showToast({
										title: res.msg || '操作失败',
										icon: 'none'
									});
								}
							}).catch(error => {
								if (error.code === 500 || error.data?.code === 500) {
									const errorMsg = error.msg || error.data?.msg || '';
									uni.showToast({
										title: errorMsg,
										icon: 'none',
										duration: 2000
									});
								} else {
									uni.showToast({
										title: '操作失败',
										icon: 'none'
									});
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 删除
			onDelete(item) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除该记录？',
					success: function(res) {
						if (res.confirm) {
							that.$http.get(`/cadre/orderException/remove/${item.id}`).then(res => {
								uni.showToast({
									title: '删除成功'
								})
								that.loadList()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		overflow-y: auto;
	}
	.content-box {
		padding-bottom: 50px;
	}
	.foot-box {
		position: fixed;
		bottom: 0%;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #fff;

		.cu-btn {
			border-radius: 10rpx;
			// color: #fff;
			margin-left: 20rpx;
			margin-right: 20rpx;
		}


	}

	.bg-sub {
		background-color: #F3F4F5;
		color: #333;
	}

	.bg-main {
		background: #006BFE;
	}

	.item-box {
		position: relative;
	}

	.top-status {
		position: absolute;
		top: 0;
		right: 0;
		padding: 10rpx 20rpx;
		font-size: 24rpx;
		border-radius: 0rpx 20rpx 0rpx 20rpx;
	}

	.color0 {
		background: #006BFE;
		color: #fff;
	}

	.color1 {
		background: #FFEBEB;
		color: #FF2B5E;
	}

	.color2 {
		background: #FCFAEB;
		color: #83DA11;
	}

	.color3 {
		background: #d8d8d8;
		color: #333;
	}
</style>